<template>
  <div class="confirm" v-if="order">
    <div class="title">
      <svg
        @click="$router.push('/own')"
        t="1671798247143"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2281"
        width="200"
        height="200"
      >
        <path
          d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z"
          p-id="2282"
        ></path>
        <path
          d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z"
          p-id="2283"
        ></path>
      </svg>
      <span>确认订单</span>
      <span></span>
    </div>
    <div class="address">
      <div
        class="noaddress"
        @click="
          $router.push({
            path: '/address-list',
            query: {
              productId: $route.query.productId,
              source: $route.query.source,
              cartIds: $route.query.cartIds,
            },
          })
        "
        v-if="!address"
      >
        <span></span>
        <span>+ 选择收获地址</span>
        <span>&gt;</span>
      </div>
      <div
        class="hasaddress"
        v-else
        @click="
          $router.push({
            path: '/address-list',
            query: {
              productId: $route.query.productId,
              source: $route.query.source,
            },
          })
        "
      >
        <div class="default-address">
          <span class="default" v-if="address.isDefault">默认</span>
          <span>{{ address.addressAll }}</span>
        </div>
        <div class="detail-address">
          <span>{{ address.addressAll }}{{ address.detailAddress }}</span>
          <span>></span>
        </div>
        <div class="person-msg">
          <span>{{ address.memberName }}</span>
          <span>{{ address.telMobile }}</span>
        </div>
      </div>
      <img
        src="https://image-mall.gxptkc.com/m/resources/address_split_border.png
"
        alt=""
      />
    </div>
    <div class="goods">
      <ul class="list">
        <li v-for="store in order.storeGroupList" :key="store.storeId">
          <div class="store-msg">
            <img
              src="	https://image-mall.gxptkc.com/m/resources/shop/shop_icon.png"
              alt=""
            />
            <p>{{ store.storeName }}</p>
            <span>&gt;</span>
          </div>
          <div
            class="goods-msg"
            v-for="item in store.productList"
            :key="item.goodsId"
          >
            <img :src="item.image" alt="" />
            <div class="right">
              <span>{{ item.goodsName }}</span>
              <span>*{{ item.buyNum }}</span>
              <span>￥{{ item.price.toFixed(2) }}</span>
            </div>
          </div>
          <ul class="else">
            <li>
              <span> 店铺优惠券</span>
              <span>暂无可用优惠券 &gt;</span>
            </li>
            <li>
              <span> 运费</span>
              <span v-if="store.expressFee == 0">免运费</span>
              <span v-else>￥{{ store.expressFee.toFixed(2) }}</span>
            </li>
            <li>
              <span> 优惠</span>
              <span>-￥{{ store.totalDiscount.toFixed(2) }}</span>
            </li>
            <li>
              <span> 小计</span>
              <span>￥{{ store.totalAmount.toFixed(2) }}</span>
            </li>
          </ul>
          <div class="leavimessage">
            <span> 订单备注 </span>
            <textarea
              name=""
              id=""
              placeholder="给商家留言，最多100字"
            ></textarea>
          </div>
        </li>
      </ul>
    </div>
    <div class="invoice">
      <span>发票</span>
      <span>不需要发票 ></span>
    </div>
    <div class="discount">
      <span>平台优惠券</span>
      <span>暂无优惠券 ></span>
    </div>
    <div class="empty"></div>
    <div class="bottom">
      <span>待付金额：</span>
      <span>￥{{ order.totalAmount }}</span>
      <span @click="toSubmitOrder">提交订单</span>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  computed: {
    ...mapState(["address"]),
  },
  methods: {
    ...mapMutations(["changeAddress"]),
    toSubmitOrder() {
      let paySn = new Date().getTime();
      if (!this.address) {
        Toast("请选择地址！");
      } else {
        let goods = [];
        this.order.storeGroupList.forEach((o) => {
          o.productList.forEach((good) => {
            console.log(good);
            goods = [good, ...goods];
          });
        });
        this.$router.push({
          path: "/pay",
          query: {
            cartIds: this.$route.query.cartIds,
            paySn: paySn,
            total: this.order.totalAmount,
            goodsInfo: JSON.stringify(goods),
          },
        });
      }
    },
  },
  watch: {
    address: {
      deep: true,
      handler(val) {
        val;
      },
    },
  },
  data() {
    return {
      token: null,
      order: null,
      myAddress: null,
    };
  },
  async created() {
    this.token = localStorage.getItem("fastCar-token");
    if (!this.$route.query.productId) {
      let res = await this.axios({
        method: "POST",
        url: "https://m-mall.gxptkc.com/v3/business/front/orderOperate/confirm",
        headers: {
          authorization: `Bearer ${this.token}`,
          "content-type": "application/json",
        },
        data: {
          platformCouponCode: "",
          orderSn: "",
          isAloneBuy: false,
          storeInfoList: [],
          source: 1,
          isCart: true,
        },
      });
      this.order = res.data.data;
    } else {
      let res = await this.axios({
        method: "POST",
        url: "https://m-mall.gxptkc.com/v3/business/front/orderOperate/confirm",
        headers: {
          authorization: `Bearer ${this.token}`,
          "content-type": "application/json",
        },
        data: {
          platformCouponCode: "",
          orderSn: "",
          isAloneBuy: false,
          storeInfoList: [],
          source: 1,
          productId: this.$route.query.productId,
          number: this.$route.query.source,
          isCart: false,
        },
      });
      this.order = res.data.data;
    }

    let defaultAddressRes = await this.axios({
      method: "GET",
      url: "https://m-mall.gxptkc.com/v3/member/front/memberAddress/list",
      headers: {
        authorization: "Bearer " + this.token,
      },
    });
    this.myAddress = defaultAddressRes.data.data.list.filter(
      (o) => o.isDefault == 1
    );
    if (!this.address) {
      this.changeAddress(this.myAddress[0]);
    }
  },
};
</script>

<style lang="scss" scoped>
.confirm {
  position: relative;
  background-color: rgb(245, 245, 245);
  height: 100vh;

  .title {
    display: flex;
    justify-content: space-between;
    padding: 10rem;
    background-color: #fff;
    margin-bottom: 10rem;

    svg {
      width: 25rem;
      height: 25rem;
    }

    span {
      font-size: 16rem;
      color: #000;
      font-weight: bold;
    }
  }

  .address {
    background-color: #fff;
    margin-bottom: 10rem;

    .noaddress {
      padding: 10rem;
      display: flex;
      justify-content: space-between;

      span {
        font-size: 14rem;
        color: #333;
        font-weight: bold;
      }
    }

    .hasaddress {
      color: #2d2d2d;
      padding: 10rem;

      p {
        font-size: 13rem;
      }
      .default-address {
        .default {
          background-color: #fc1c1c;
          color: #fff;
          padding: 2rem 3rem;
          border-radius: 5rem;
          margin-right: 5rem;
        }
      }

      .detail-address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10rem 0;

        span {
          font-size: 16rem;
          font-weight: bold;
        }
      }

      .person-msg {
        span {
          font-size: 14rem;

          &:last-child {
            color: #999;
            margin-left: 20rem;
          }
        }
      }
    }
  }

  .goods {
    background-color: #fff;
    padding: 10rem;

    ul.list {
      > li {
        margin-bottom: 20rem;

        .store-msg {
          display: flex;
          align-items: center;
          font-size: 16rem;
          font-weight: bold;
          padding-bottom: 15rem;
          border-bottom: 1px solid #eee;

          img {
            width: 17rem;
            height: 16rem;
          }

          p {
            margin: 0 10rem;
          }
        }

        .goods-msg {
          padding: 10rem;
          display: flex;
          border-bottom: 1px solid #eee;

          img {
            width: 110rem;
            height: 110rem;
            margin-right: 10rem;
            border-radius: 10rem;
          }

          .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            span {
              font-size: 14rem;
              color: #333;

              &:nth-child(2) {
                font-size: 12rem;
                color: #999;
              }

              &:last-child {
                font-size: 17rem;
                color: #fc1c1c;
              }
            }
          }
        }

        ul.else {
          li {
            padding: 15rem;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            &:first-child {
              span {
                &:nth-child(2) {
                  color: #333;
                  font-weight: normal;
                }
              }
            }
            span {
              font-size: 13rem;
              color: #333;

              &:last-child {
                color: #fc1c1c;
                font-weight: bold;
              }
            }
          }
        }

        .leavimessage {
          display: flex;
          flex-direction: column;

          span {
            font-size: 14rem;
            color: #333;
            margin: 15rem 5rem;
          }

          textarea {
            background-color: rgb(245, 245, 245);
            border: none;
            border-radius: 10rem;
            height: 70rem;
            padding: 10rem;
            box-sizing: border-box;
          }
        }
      }
    }
  }

  .invoice,
  .discount {
    display: flex;
    justify-content: space-between;
    padding: 15rem;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    span {
      font-size: 13rem;
      color: #333;
    }
  }

  .empty {
    width: 100%;
    height: 50rem;
  }

  .bottom {
    background-color: #fff;
    padding: 0 10rem;
    box-sizing: border-box;
    height: 50rem;
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: right;
    align-items: center;

    span {
      font-size: 15rem;
      color: #333;

      &:nth-child(2) {
        color: #fc1c1c;
        margin: 0 10rem;
      }

      &:last-child {
        color: #fff;
        background-color: #fc1c1c;
        height: 35rem;
        border-radius: 20rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20rem;
      }
    }
  }
}
</style>